<template>
  <div class="total">
    <i id="icon" class="el-icon-phone"></i>
    <div class="title">Take an Order!</div>
    <!-- 订单信息 -->
    <div class="tip">1.请选择入住人数</div>
    <div class="block">
      <el-slider :show-tooltip="false" max="4" v-model="people_num" show-input>
      </el-slider>
    </div>
    <div class="tip">2.请选择入住时间</div>
    <div class="block">
      <el-date-picker
        class="date_picker"
        v-model="time_start"
        type="date"
        default-value="2020-11-14"
        placeholder="选择日期"
        :editable="false"
        :clearable="false"
      >
      </el-date-picker>
    </div>
    <div class="tip">3.请选择退房时间</div>
    <div class="block">
      <el-date-picker
        class="date_picker"
        v-model="time_end"
        type="date"
        default-value="2020-11-16"
        placeholder="选择日期"
        :editable="false"
        :clearable="false"
      >
      </el-date-picker>
    </div>
    <el-button @click="search" class="search_btn" type="primary"
      >查询余量</el-button
    >
    <div class="tip">4.可预定房型</div>
    <!-- 表格内容 -->
    <el-table :data="tableData" v-loading="loading" style="width: 100%">
      <el-table-column label="酒店">
        <template slot-scope="scope">
          <span>{{ scope.row.hotel_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="房型">
        <template slot-scope="scope">
          <span>{{ scope.row.room_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="平均价格">
        <template slot-scope="scope">
          <span>¥{{ scope.row.price | toFixed }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="order(scope.$index, scope.row)"
            >预定</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom">- By 2018080901019 许孙 -</div>
  </div>
</template>

<script>
import axios from "axios";
// import { Loading } from "element-ui";
const base = "http://127.0.0.1:3000";

export default {
  name: "myPage",
  props: {},
  filters: {
    toFixed: function (value) {
      if (!value) return "";
      return parseFloat(value).toFixed(2);
    },
  },
  data() {
    return {
      tableData: [],
      people_num: 0,
      time_start: "",
      time_end: "",
      loading: false,
    };
  },
  methods: {
    order(index, row) {
      console.log(index, row);
      const _ = this;
      this.$confirm(
        `是否预定【${row.hotel_name}】的【${row.room_name}】？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }
      )
        .then(() => {
          // Loading.service({ fullscreen: true });
          // this.$nextTick(() => {
          //   // 以服务的方式调用的 Loading 需要异步关闭
          //   loadingInstance.close();
          // });
          console.log(
            _.tableData[index],
            _.people_num,
            _.toDate(_.time_start),
            _.toDate(_.time_end)
          );

          axios
            .get(
              `${base}/api/take_order?room_id=${
                _.tableData[index].room_id
              }&start="${_.toDate(_.time_start)}"&end="${_.toDate(
                _.time_end
              )}"&amount=${_.people_num}&payment=${
                _.people_num * _.tableData[index].price
              }&create_date="${_.toDate(new Date())}"&customer_id=201901`
            )
            .then(function (response) {
              console.log(response);
              _.$message({
                type: "success",
                message: "预定成功!",
              });
              _.search();
            });
        })
        .catch(() => {});
    },
    search: function () {
      const _ = this;
      const num = this.people_num;
      const start = _.toDate(this.time_start);
      const end = _.toDate(this.time_end);
      if (num && start && end) {
        _.loading = true;
        console.log(num, start, end);
        axios
          .get(
            `${base}/api/get_room_info?remain=${num}&start_date='${start}'&end_date='${end}'`
          )
          .then(function (response) {
            /**
             * 查询成功
             */
            if (response.data.err_code) {
              console.log(response.data.msg);
              _.loading = false;
              _.tableData = response.data.msg;
            } else {
              _.$message({
                message: response.data.msg,
                type: "warning",
              });
            }
          });
      } else {
        this.$message({
          message: "请填写完整信息",
          type: "warning",
        });
      }
    },
    toDate: function (time) {
      const date = new Date(time);
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
  },
};
</script>

<style>
.search_btn {
  width: 300px;
  margin: 20px 0;
}
.date_picker {
  margin-left: -80px;
}
.date_picker .el-input__inner {
  width: 300px;
}
.tip {
  /* width: 320px; */
  align-self: flex-start;
  text-align: left;
  margin-top: 15px;
  margin-bottom: 10px;
  font-weight: 800;
  color: #000;
  padding: 1px 3px;
  box-shadow: rgba(0, 153, 255, 0.193) 0 -12px 0 inset;
}
.total {
  position: relative;
  transform: translateX(-50%);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px;
}
.title {
  font-size: 40px;
  font-weight: 800;
  margin: 30px 0;
}
.bottom {
  font-size: 20px;
  font-weight: 200;
  margin: 30px 0;
  margin-top: 200px;
  color: #ccc;
}
#icon {
  font-size: 100px;
}
.block {
  width: 280px;
}
</style>